<template>
  <div>
    <mt-header title="我的付费查看" fixed style="background-color: #24aa7d;color:#fff;">
      <router-link to="/me" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>

    <div class="main" ref="wrapper" :style="{ height: (wrapperHeight) + 'px' }">
      <mt-loadmore
        class="loadmore"
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
        :autoFill="isAutoFill"
      >
        <div style="height:100%;">
          <ul style="overflow:scroll;">
            <li v-for="(item,index) in list" :key="index">
              <div class="title">{{item.SubjectName}}</div>
              <div class="money">{{item.Amount}}</div>
              <div class="date">{{item.HappenTime}}</div>
            </li>
          </ul>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
import https from "../../utils/http.js";
export default {
  props: {},
  data() {
    return {
      token: "009800A30080002E00F900F400A6000C0090006900650003007600DA00320027",
      list: [],
      PageIndex: 1,
      PageTotal: 0,
      allLoaded: false,
      isAutoFill: false,
      wrapperHeight: 0
    };
  },
  computed: {},
  created() {
    this.token = localStorage.getItem("token");
  },
  mounted() {
    this.get_detailed();
    this.wrapperHeight =
      document.documentElement.clientHeight -
      this.$refs.wrapper.getBoundingClientRect().top;
  },
  watch: {},
  methods: {
    loadTop() {
      this.get_detailed();
    },
    loadBottom() {
      this.loadMore();
    },
    loadMore() {
      if (this.PageIndex > this.PageTotal) {
        Toast("已经到底了");
        this.$refs.loadmore.onBottomLoaded();
      } else {
        https({
          method: "post",
          url: "/api/Members/GetTradePage",
          data: {
            TokenCode: this.token,
            VersionCode: "1.0",
            TimeStamp: 0,
            FormData: {
              PageIndex: this.PageIndex,
              PageSize: 15,
              Criteria: {}
            },
            RecordKey: "",
            SignCode: ""
          }
        })
          .then(res => {
            if (res.ResultCode == 111111) {
              this.list = this.list.concat(res.ResultData.RecordList);
              this.PageIndex++;
              this.$refs.loadmore.onBottomLoaded();
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    get_detailed() {
      https({
        method: "post",
        url: "/api/Members/GetTradePage",
        data: {
          TokenCode: this.token,
          VersionCode: "1.0",
          TimeStamp: 0,
          FormData: {
            PageIndex: 1,
            PageSize: 10,
            Criteria: {}
          },
          RecordKey: "",
          SignCode: ""
        }
      })
        .then(res => {
          if (res.ResultCode == 111111) {
            this.list = res.ResultData.RecordList;
            this.allLoaded = false;
            this.PageIndex = res.ResultData.PageIndex;
            this.PageTotal = res.ResultData.PageTotal;
            this.PageIndex = 2;
            this.$refs.loadmore.onTopLoaded();
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.main {
  height: 100%;
  overflow: scroll;
}
.main ul {
  margin: 0 auto;
  padding: 0;
  width: 95%;
  //   height: 100%;
}
.main ul li {
  list-style: none;
  width: 100%;
  height: 3rem;
  border-bottom: 1px solid #eee;
  .title {
    font-size: 1rem;
    width: 32%;
    height: 3rem;
    line-height: 3rem;

    float: left;
  }
  .money {
    font-size: 1rem;
    width: 32%;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    float: left;
    color: red;
  }
  .date {
    width: 32%;
    height: 3rem;
    line-height: 3rem;
    font-size: 0.8rem;
    color: #666;

    text-align: right;
    float: left;
  }
}
</style>
